<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Package Customize Form</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/css/css.css">
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/css/jquery-ui.css">
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>public/javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo base_url(); ?>public/javascript/jquery-ui.js"></script>
</head>
<body class="bgr_grdt_orange">
<form action="<?php echo base_url();?>home/package/updateitinerary" method="post">
<div class="w1170 mgrauto">
  <div class="item pdt30 pdb70">
    <div class="fl w325 pdr24 brown bgr_form2" style="min-height:742px;">
      <p class="white bold mgb5 mgt0">SUMMARY</p>
      <div class="item pdb6 white"><strong>Day 1:</strong> Take the evening flight at 22.50 from Manila International Airport to Ho Chi Minh, Vietnam (about 2 hours). </div>
      <div class="item pdb6 white"><strong>Day 2:</strong> Take the evening flight at 22.50 from Manila International Airport to Ho Chi Minh, Vietnam (about 2 hours). </div>
      <div class="item pdb6 white"><strong>Day 3:</strong> Take the evening flight at 22.50 from Manila International Airport to Ho Chi Minh, Vietnam (about 2 hours). </div>
      <div class="item pdb6 white"><strong>Day 4:</strong> Take the evening flight at 22.50 from Manila International Airport to Ho Chi Minh, Vietnam (about 2 hours). </div>
      <div class="item pdb6 white"><strong>Day 5:</strong> Take the evening flight at 22.50 from Manila International Airport to Ho Chi Minh, Vietnam (about 2 hours). </div>
      <div class="item pdt210 brown f40 ff_museo300 lheight29 lighter" id="boxcustomize"> CREATE<br>
        <h1 class="f29 mgt0 ff_museo500 mgb10">YOUR INITERARY</h1>
      </div>
      <a href="javascript:void(0);" class="fl white"><img src="<?php echo base_url(); ?>public/images/back.png" width="8" height="10"/>&nbsp;Back to Home</a>
      <div class="item"><a href="#" class="fl white"><img src="<?php echo base_url(); ?>public/images/back.png" width="8" height="10"/>&nbsp;Back to Package Page</a></div>
    </div>
    <div class="fl pdl30 w725">
		<div id="dvday">
      		
		</div>
      <div class="fr pdr32">
        <table cellpadding="5" cellspacing="0" class="bder-clp fr white">
          <tr>
            <th class="bder_fff w40">Day 1</th>
            <th class="bder_fff w40">Day 2</th>
            <th class="bder_fff w40">Day 3</th>
            <th class="bder_fff w40">Day 4</th>
            <th class="bder_fff w40">Day 5</th>
          </tr>
          <tr>
            <td class="bder_fff w40 txt_center">$2000</td>
            <td class="bder_fff w40 txt_center">$2000</td>
            <td class="bder_fff w40 txt_center">$2000</td>
            <td class="bder_fff w40 txt_center">$2000</td>
            <td class="bder_fff w40 txt_center">$2000</td>
          </tr>
        </table>
        <div class="item mgt10">
          <div class="fr white bder_fff w50 txt_center pdt5 pdb5">$10.000</div>
          <div class="fr white bder_fff w50 bold txt_center pdt5 pdb5 bder-r0">Total</div>
        </div>
        <div class="item pdt16">

          <input type="submit" value="BOOK" class="bder0 ff_museo500 f21 pdt3 pdb4 pdl5 pdr5 white bgr_143167 fr" />
          <input type="reset" value="RESET" class="bder0 ff_museo500 f21 pdt3 pdb4 pdl5 pdr5 white bgr_80 mgr12 fr" />
          <input type="button" onClick="addDay();" value="+ DAY" class="bder0 ff_museo500 f21 pdt3 pdb4 pdl5 pdr5 white bgr_80 mgr12 fr" />
          <input type="button" onClick="removeDay();" value="- DAY" class="bder0 ff_museo500 f21 pdt3 pdb4 pdl5 pdr5 white bgr_80 mgr12 fr" />
          
        </div>
      </div>
    </div>
  </div>
</div>
</form>
<script>
	function theDay(numberday){
		this.day=numberday;
		this.listplace=new Array();
	}
	
	function removeDay(){
		$("#dvday > div:last-child").remove();
		listday.pop();
	}
	function addplace(numberday,placename,index){
		var i;
		for(i=0;i<listday.length;i++){
			alert(listday[i].day);
			if(listday[i].day==numberday){
				if(index>=listday[i].listplace.length){
					listday[i].listplace.push(placename);
					
				}else{
					listday[i].listplace[index]=placename;
				}
			}
		}
	}
	function moreplace(element,numberday){
		var selectplace='<select name="data['+numberday+'][place][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  availableplace.length;i++){
			selectplace+='<option value="'+availableplace[i].id+'">'+availableplace[i].name+'</option>';
		}
		selectplace+='</select>';
		$(element).before(selectplace);
	}
	
	function morerestaurant(element,numberday){
		var selectplace='<select name="data['+numberday+'][restaurant][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  avaiablerestaurant.length;i++){
			selectplace+='<option value="'+avaiablerestaurant[i].id+'">'+avaiablerestaurant[i].name+'</option>';
		}
		selectplace+='</select>';
		$(element).before(selectplace);
	}
	function moreactivity(element,numberday){
		var selectplace='<select name="data['+numberday+'][activity][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  avaiableactivity.length;i++){
			selectplace+='<option value="'+avaiableactivity[i].id+'">'+avaiableactivity[i].name+'</option>';
		}
		selectplace+='</select>';
		$(element).before(selectplace);
	}
	
	
	
	function addDay(){
		var day;
		day=new theDay(listday.length+1);
		listday.push(day);
		var selectplace='<select name="data['+day.day+'][place][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  availableplace.length;i++){
			selectplace+='<option value="'+availableplace[i].id+'">'+availableplace[i].name+'</option>';
		}
		selectplace+='</select>';
		
		var selecthotel='<select name="data['+day.day+'][hotel][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  availablehotel.length;i++){
			selecthotel+='<option value="'+availablehotel[i].id+'">'+availablehotel[i].name+'</option>';
		}
		selecthotel+='</select>';
		
		var selectrestaurant='<select name="data['+day.day+'][restaurant][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  avaiablerestaurant.length;i++){
			selectrestaurant+='<option value="'+avaiablerestaurant[i].id+'">'+avaiablerestaurant[i].name+'</option>';
		}
		selectrestaurant+='</select>';
		
		var selectactivity='<select name="data['+day.day+'][activity][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  avaiableactivity.length;i++){
			selectactivity+='<option value="'+avaiableactivity[i].id+'">'+avaiableactivity[i].name+'</option>';
		}
		selectactivity+='</select>';
		
		var selectguide='<select name="data['+day.day+'][guide][]" class="bgr_fff bder0 item mgb3"><option value="nochoice">Choice place</option>';
		for(var i=0;i<  avaiableguide.length;i++){
			selectguide+='<option value="'+avaiableguide[i].id+'">'+avaiableguide[i].name+'</option>';
		}
		selectguide+='</select>';
		
		var str='<div class="fl pdl18 pdr24 pdt4 boxhoverform mgb-2">               <div class="item bder_l1_f pdb5">                  <div class="fl w105 pdl30 white"><img src="<?php echo base_url(); ?>public/images/trontrang.png" width="25" height="25" class="fl mgt-2 mgl-43"/>                    <h2 class="item mgt0  ff_museo500 lighter">DAY '+
		listday.length
		+'</h2>                    '+selectplace+'                    <a onclick="return moreplace(this,'+day.day+');" href="#" class="fr f30 white mgt-7">+</a> </div>                  <div class="fl w105 pdl30 white">                    <h2 class="item mgt0  ff_museo500 lighter">Hotel</h2>                    '+selecthotel+'                  </div>                  <div class="fl w105 pdl30 white">                    <h2 class="item mgt0  ff_museo500 lighter">Restaurant</h2>                    '+selectrestaurant+'                   <a href="#" class="fr f30 white mgt-7"  onclick="return morerestaurant(this,'+day.day+');">+</a> </div>                  <div class="fl w105 pdl30 white">                    <h2 class="item mgt0  ff_museo500 lighter">Activities</h2>                    '+selectactivity+'                    <a  onclick="return moreactivity(this,'+day.day+');" href="#" class="fr f30 white mgt-7">+</a> </div>                  <div class="fl w105 pdl30 white">                    <h2 class="item mgt0  ff_museo500 lighter">Tour Guide</h2>                    '+selectguide+'                    <br>                    <input type="text" class="bder_fff w98 txt_right bold white pdr5 bgr_none" value="$2000"/>                  </div>                </div>              </div>';
		$("#dvday").append(str);
	}
	var availableplace=[<?php $i=0;
		foreach($place as $p){ 
			if($i!=0) echo ",";
			$i++;
			echo '{id:"'.$p["id"].'",name:"'.$p["name"].'"}';
		}
	?>];
	var availablehotel=[<?php $i=0;
		foreach($hotel as $p){ 
			if($i!=0) echo ",";
			$i++;
			echo '{id:"'.$p["id"].'",name:"'.$p["name"].'"}';
		}
	?>];
	var avaiablerestaurant=[<?php $i=0;
		foreach($restaurant as $p){ 
			if($i!=0) echo ",";
			$i++;
			echo '{id:"'.$p["id"].'",name:"'.$p["name"].'"}';
		}
	?>];
	var avaiableactivity=[<?php $i=0;
		foreach($activity as $p){ 
			if($i!=0) echo ",";
			$i++;
			echo '{id:"'.$p["id"].'",name:"'.$p["name"].'"}';
		}
	?>];
	var avaiableguide=[<?php $i=0;
		foreach($guide as $p){ 
			if($i!=0) echo ",";
			$i++;
			echo '{id:"'.$p["id"].'",name:"'.$p["name"].'"}';
		}
	?>];
	var listday=new Array();
	addDay();
</script>
</body>
</html>